<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('修改晶棒托入库')"/>
    <style>
        [v-cloak] {
            display: none;
        }
    </style>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-MaterialInfo-edit" th:object="${BoxItemDto}">
        <div class="form-group">
            <label class="col-sm-3 control-label">托盘号：</label>
            <div class="col-sm-8">
                <input id="carrierId" name="carrierId" th:field="*{carrierId}" class="form-control" type="text" readonly="true">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">批次号：</label>
            <div class="col-sm-8">
                <input id="materialBatchId" name="materialBatchId" th:field="*{materialBatchId}" class="form-control" type="text" required>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">货区：</label>
            <div class="col-sm-8">
                <select id="areaId" name="areaId" class="form-control" v-model="checkAreaId" required>
                    <option v-for="area in areas" :value="area.areaId" v-cloak>{{area.areaName}}</option>
                </select>
            </div>
        </div>
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">物料编码：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <input id="materialProduct" name="materialProduct" th:field="*{materialProduct}" class="form-control" type="text" required>-->
<!--            </div>-->
<!--        </div>-->
        <div class="form-group">
            <label class="col-sm-3 control-label">物料品质：</label>
            <div class="col-sm-8">
                <input id="materialQuality" name="materialQuality" th:field="*{materialQuality}" class="form-control" type="text" required>
            </div>
        </div>
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">客户等级：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <select id="materialCategory" name="materialCategory" class="form-control" v-model="checkMaterialCategory" required>-->
<!--                    <option value="A">A</option>-->
<!--                    <option value="A+H">A+H</option>-->
<!--                    <option value="A-">A-</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">单晶PN型：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <select id="materialPN" name="materialPN" class="form-control" v-model="checkMaterialPN" required>-->
<!--                    <option value="P">P</option>-->
<!--                    <option value="N">N</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
<!--        <div class="form-group">-->
<!--            <label class="col-sm-3 control-label">拼棒类型：</label>-->
<!--            <div class="col-sm-8">-->
<!--                <select id="assemblyType" name="assemblyType" class="form-control" v-model="checkAssemblyType" required>-->
<!--                    <option value="1">整棒</option>-->
<!--                    <option value="2">二拼</option>-->
<!--                    <option value="3">三拼</option>-->
<!--                </select>-->
<!--            </div>-->
<!--        </div>-->
    </form>
    <form th:object="${BoxItemDto}">
        <input id="checkAreaId" type="hidden" th:field="*{areaId}"/>
        <input id="checkMaterialCategory" type="hidden" th:field="*{materialCategory}"/>
        <input id="checkMaterialPN" type="hidden" th:field="*{materialPN}">
        <input id="checkAssemblyType" type="hidden" th:field="*{assemblyType}">
    </form>
</div>
<th:block th:include="include :: footer"/>
<script type="text/javascript">
    var prefix = ctx + "in/MaterialInfo";

    function submitHandler(){
        if($.validate.form()){
            $.operate.save(prefix + "/edit", $('#form-MaterialInfo-edit').serialize());
        }
    }

    var app = new Vue({
        el: '.wrapper',
        data: {
            areas: [],
            checkAreaId: '',
            checkMaterialCategory: '',
            checkMaterialPN: '',
            checkAssemblyType: ''
        },
        methods: {
            //获取货区列表
            getAreas: function(){
                var that = this;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/areaInfo/list",
                    data: {},
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        that.areas = data.rows;
                    }
                });
            }
        },
        created(){
            this.getAreas();
            this.checkAreaId = document.getElementById('checkAreaId').value;
            this.checkMaterialCategory = document.getElementById('checkMaterialCategory').value;
            this.checkMaterialPN = document.getElementById('checkMaterialPN').value;
            this.checkAssemblyType = document.getElementById('checkAssemblyType').value;
        }
    })
</script>
</body>
</html>
